<template>
    <div class="index">
       <!-- 导航 -->
       <div class='wrapper'>
         <!-- 顶部 -->
           <div class="header">
              <van-icon name="location-o" size='25' class="header-icon"/>
              <div class="area">成都</div>
              <div><input type="text" class="search" placeholder="搜索"></div>
              <div class="header-search"><van-icon name="search" class="header-search-icon" /></div>
           </div>
           <!-- 文字导航 -->
           <div class="text-nav">
             <ul class="recommend">
               <li class="text1">本地推荐</li>
               <li class="text2">最新推荐</li>
               <li class="text3">热门推荐</li>
               <li class="text4">附近推荐</li>
              </ul>
           </div>
           <!-- 图标导航 -->
           <div class="nav-icon">
            <ul class="icons">
              <li>
                <img :src="require('../../assets/icons/house.svg')" alt="" class="house-img">
                <span>房贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/car.svg')" alt="" class="car-img">
                <span>车贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/bag.svg')" alt="" class="bag-img">
                <span>公积金</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/yes.svg')" alt="" class="yes-img">
                <span>保单贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/firm.svg')" alt="" class="firm-img">
                <span>企业贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/list.svg')" alt="" class="list-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/star.svg')" alt="" class="star-img">
                <span>社保贷</span>

              </li>
              <li>
                <img :src="require('../../assets/icons/card.svg')" alt="" class="card-img">
                <span>信用卡</span>

              </li>

              <li>
                <img :src="require('../../assets/icons/peer.svg')" alt="" class="peer-img">
                <span>网贷</span>

              </li>
              <li @click="moreHandle">
                <img :src="require('../../assets/icons/more.svg')" alt="" class="more-img">
                <span>更多</span>

              </li>

            </ul>
           </div>
           <!-- 信息区域 -->
            <div class="messages-card">
               <div class="message-name">
                 <span>产品名称：保单贷</span>
                 <span>贷款性质：信用贷款</span>
                 <span  class="name-last1">最低利率：0.85%</span>
                 <span class="name-last2">最高额度：30万</span>
               </div>
               <div class="contact">
                 <span>立即申请</span>
                  <span>在线咨询：立即联系</span>
               </div>
            </div>
             <div class="messages-card message">
               <div class="message-name">
                 <span>产品名称：保单贷</span>
                 <span>贷款性质：信用贷款</span>
                 <span class="name-last1">最低利率：0.85%</span>
                 <span class="name-last2">最高额度：30万</span>
               </div>
               <div class="contact">
                 <span>立即申请</span>
                  <span>在线咨询：立即联系</span>
               </div>
            </div>
             <div class="messages-card message">
               <div class="message-name">
                 <span>产品名称：保单贷</span>
                 <span>贷款性质：信用贷款</span>
                 <span class="name-last1">最低利率：0.85%</span>
                 <span class="name-last2">最高额度：30万</span>
               </div>
               <div class="contact">
                 <span>立即申请</span>
                  <span>在线咨询：立即联系</span>
               </div>
            </div>
       </div>

    </div>

</template>

<script>
export default {
  data () {
    return {

    }
  },
  created () {

  },
  methods: {
    moreHandle () {
      this.$router.push('/more')
    }
  }
}
</script>

<style lang="less" scoped>
.index{
  padding-bottom: 50px;
  height:667px;
  background-color: #f5f5f5;;
}
.wrapper{
  width: 375px;
  height: 260px;
  top: 0;
  position: fixed;
  background-color: rgba(8, 117, 238, 1);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}
.header{
  display: flex;
  height:50px;
 .header-icon{

    height: 25px;
    top: 18px;
    font-size: 25px;
    color: rgba(255, 255, 255, 1);
    margin-left:5px;

 }

}
.area{

  width: 48px;
  height: 19px;
  left: 39px;
  top: 22px;
  position: fixed;
  color: rgba(80, 80, 80, 1);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  font-size: 13px;
  line-height: 150%;
  text-align: center;

}
.search{

    width: 209px;
    height: 29px;
    position: fixed;
    left: 103px;
    top: 17px;
    text-indent: 11px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 15px;
    font-size: 14px;
    line-height: 150%;
    text-align: left;

}
.header-search{
  width: 30px;
  height: 30px;
  border-radius: 6px;
  position: fixed;
   left: 325px;
    top: 17px;
    text-align: center;

  background-color:  rgba(255, 255, 255, 1);

}
.header-search-icon{
  color:#1989fa;
  font-size:22px;
  padding-top:5px;
}
.recommend{
  display: flex;
  justify-content: space-around;
  margin-top:35px;
  font-size: 16px;
  color:#fff;

}
.nav-icon{

  width:340px;
  height:120px;
  text-align: center;
  background-color: #fff;
  margin: 18px 8px 0 15px;
  .icons{
    height:100%;
    width:100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    li{
      width:43px;
      height:38px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      font-size: 12px;
      color:#505050;
      margin:10px 0 0 20px;
      span{
        display: inline-block;
        width:47px;
        height:13px;
        margin-left:-10px;
      }

    }
  }
}
.house-img,.car-img,.bag-img,.yes-img,.firm-img,.peer-img,.star-img,.card-img,.list-img,.more-img{
  display: inline-block;
  width:23px;
  height:23px;
}
.messages-card{
  margin:35px  10px 10px 10px;
  width:355px;
  height: 100px;
  font-size: 12px;

  .message-name{
    height:65px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
   background-color:#08eb32d7;
   border-top-left-radius:8px;
   border-top-right-radius:8px;
   span{
     margin-top:5px;
    width:125px;
     height:18px;
     color:#505050;
     text-align: center;

   }

  }
    .name-last1{
     padding-left:-1px  !important;
   }
   .name-last2{
     padding-right:9px !important;
   }
  .contact{
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    height:35px;
    line-height: 35px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    padding:0 10px 0 15px;

  }
}
.message{
  margin-top:10px;
}
</style>
